/**
 * @author YiJunJie
 * @email eric.hz.jj@gmail.com
 * @create date 2017-12-22 08:45:24
 * @desc [空白视图]
 * @flow
 */
import React from 'react';
import {
    View,
    Image,
    Text,
    StyleSheet,
    TouchableOpacity,
    Dimensions,
} from 'react-native';


export const StatusType = {
    IDLE: 0,
    REFRESH: 1,
    NO_DATA: 3,
    ERROR: 4,
    FAILURE: 5
};

interface StatusInfo {
    imageSource: Object,
    title: string,
    code?: number
}

interface EmptyProps {

    /**
     * 文本容器的样式
     *
     * @type {?Object}
     */
    textWrapStyle?: Object,
    /**
     * 文本的样式
     *
     * @type {?Object}
     */
    textStyle?: Object,
    /**
     * 空白视图的类型
     *
     * @type {('LOADING' | 'ERROR' | 'NODATA')}
     * LOADING -> 正在加载
     * ERROR -> 网络错误
     * FAIL -> 业务错误
     * NODATA -> 没有数据
     */
    emptyViewType: 'LOADING' | 'ERROR' | 'FAIL' | 'NODATA',
    /**
     * 额外信息
     *
     * @type {?Element}
     */
    extElement?: Element,

    /**
     * 处理重新加载的事件
     *
     * @type {Function}
     */
    onReloadHandler: Function,
    /**
     * 重载按钮容器样式
     */
    reloadButtonStyle?: Object,
    containerStyle:Object,
    /**
     * 重载按钮文字样式
     */
    reloadButtonTextStyle?: Object,
    reloadTitle?: string,
    /**
     * 图片样式
     */
    imageStyle?: Object,

    noDataInfo?: StatusInfo,
    errorInfo?: StatusInfo,
    loadingInfo?: StatusInfo,
    failInfo?: StatusInfo

}

const EmptyView = (props: EmptyProps) => {
    const {
        style,
        height,
        textWrapStyle,
        textStyle,
        extElement,
        onReloadHandler,
        emptyViewType,
        imageStyle,
        reloadButtonStyle,
        containerStyle={backgroundColor: '#f7f7f7'},
        reloadButtonTextStyle,
        _reloadTitle = '重试',
        noDataInfo = {imageSource: require('./img/noData.png'), title: '暂无数据'},
        errorInfo = {imageSource: require('./img/noData.png'), title: '网络错误'},
        loadingInfo = {imageSource: require('./img/loadingCircle.gif'), title: '请求中'},
        failInfo = {imageSource: require('./img/networkError.png'), title: '业务错误',code:100},
    } = props;

    let _imageSource;
    let descContent;
    let _imageStyle;

    switch (emptyViewType) {
        case 'ERROR': {
            _imageSource = errorInfo.imageSource;
            descContent = errorInfo.title;
            break;
        }
        case 'NODATA': {
            _imageSource = noDataInfo.imageSource;
            descContent = noDataInfo.title;
            break;
        }
        case 'FAIL': {
            _imageSource = failInfo.imageSource;
            descContent = failInfo.title+failInfo.code;
            break;
        }
        case 'LOADING': {
            _imageSource = loadingInfo.imageSource;
            descContent = loadingInfo.title;
            _imageStyle = {width: 90, height: 90};
            break;
        }
        default: {
            _imageSource = noDataInfo.imageSource;
            descContent = noDataInfo.title;
            _imageStyle = {width: 90, height: 90};
        }
    }

    return (
        <View style={[styles.containerWrap, containerStyle]}>
            <Image
                style={[styles.image, _imageStyle, imageStyle]}
                source={_imageSource}
            />
            <View style={[styles.textWrap, textWrapStyle]}>
                {
                    // 如果用户传入了额外的节点 直接显示额外节点
                    extElement
                        ?
                        extElement
                        // 如果需要有重新加载的回调则通过 TouchableOpacity 包裹
                        :
                        <Text style={[styles.text, textStyle]}>{descContent}</Text>
                }
            </View>

            {onReloadHandler && emptyViewType !== 'LOADING' && emptyViewType !== 'NODATA'
                    ?
                    <TouchableOpacity
                        style={[styles.reloadButton, reloadButtonStyle]}
                        onPress={onReloadHandler}
                    >
                        <Text style={[styles.reloadButtonText, reloadButtonTextStyle]}>{_reloadTitle}</Text>
                    </TouchableOpacity>
                    :
                    null
            }

        </View>
    );
};

const styles = StyleSheet.create({
    containerWrap: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#f7f7f7',
        width: Dimensions.get('window').width
    },

    textWrap: {
        marginTop: 10,
        marginBottom: 20
    },

    text: {
        fontSize: 13,
        color: '#666'
    },


    reloadButton: {
        flexDirection: 'row',
        width: 120,
        height: 32,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 16,
        borderWidth: 1,
        borderColor: '#666'
    },

    reloadButtonText: {
        fontSize: 15,
        color: '#333',
        textAlign: 'center',
    },
});

export default EmptyView;
